<template>
  <div class="h-auto">
    <!-- 顶部栏 -->
    <SearchArea @tabChangeHandle="tabChangeHandle" />
    <div class="flex-column-center container" style="">
      <Navbar />
      <router-view />
    </div>
    <!--    底部栏-->
    <Footer />
  </div>
  <contact-customer-dialog ref="costomerDialog"></contact-customer-dialog>
</template>
<script setup>
import { onBeforeMount, reactive, ref } from 'vue'
import { useStore } from 'vuex'
import { useRoute, useRouter } from 'vue-router'
import IndexHeader from '../component/header.vue'
import CourseCenter from '../component/course-center.vue'
import TeacherBanner from '../component/teacher-banner.vue'
import WelcomeCard from '../component/welcome-card.vue'
import FooterLink from '../component/footer-link.vue'
import Footer from '../component/footer.vue'
import IntentCourse from '../component/intent-course.vue'
import CourseTypeList from '../component/course-type-list.vue'
import { getUserInfo } from '../../api/user.js'
import { getTreeDictByCode, listBanner } from '../../api/home.js'
import { formatNull } from '../../utils/common.js'
import ContactCustomerDialog from '@/views/component/contact-customer-dialog.vue'

import { getTbCategory } from '../../api/source.js'

import SearchArea from '../components/search-area.vue'
import Navbar from '../components/navbar.vue'

const headerRef = ref(null)
const route = useRoute()
const router = useRouter()
const store = useStore()
const data = reactive({
  userInfo: {
    intentionalExamId: null,
    intentionalExam: '',
  },
  bannerList: [],
  courseTypeList: [],
  welcomeList: {},
  showSelectExamDialog: false,
  hasInit: false,
  selectedIndex: 0,
})

onBeforeMount(() => {
  initData()
  let token = localStorage.getItem('token')
  if (data.selectedIndex == 0 && token) {
    // getUserInfoHandle();
  }
})
function getUserInfoHandle() {
  getUserInfo((res) => {
    data.userInfo = res.data
    localStorage.setItem('intentionalExam', formatNull(data.userInfo.intentionalExam))
    localStorage.setItem('intentionalExamId', formatNull(data.userInfo.intentionalExamId))
    localStorage.setItem('provinceName', formatNull(data.userInfo.provinceName))
    localStorage.setItem('provinceId', formatNull(data.userInfo.provinceId))
  })
}

function initBanner() {
  listBanner({ catalogCode: 'courseIndexCode' }, (res) => {
    data.bannerList = res.data
  })
}

const initTabCategory = () => {
  // 获取tab栏数据
  getTbCategory({}, (res) => {
    console.log('res',res)
  })
}


function initCourse() {
  getTreeDictByCode({ typeCode: 'courseTypeCode' }, (res) => {
    data.courseTypeList = res.data
    getIntentionalExam()
  })
}
function getIntentionalExam() {
  let intentionalExamId = localStorage.getItem('intentionalExamId')
  let intentionalExam = localStorage.getItem('intentionalExam')
  data.userInfo.intentionalExamId = intentionalExamId || data.courseTypeList[0].id
  data.userInfo.intentionalExam = intentionalExam || data.courseTypeList[0].name
}

function initData() {
  // initBanner()
  // initCourse()
  initTabCategory()
}

function login(code) {
  router.push({
    path: '/login',
    query: {
      code: code,
    },
  })
}
function goNewsInfo(id) {
  const { href } = router.resolve({
    path: '/article/info',
    query: {
      id: id,
    },
  })
  window.open(href, '_blank')
}
function goCourseCenter(id) {
  const { href } = router.resolve({
    path: '/course/center',
    query: {
      courseType: id,
    },
  })
  window.open(href, '_blank')
}
let costomerDialog = ref()
function openBannerLink(url) {
  if (url === '客服') {
    costomerDialog.value.openDialog('kechengzixun')
  } else {
    window.open(url, '_blank')
  }
}

function tabChangeHandle(index) {
  data.selectedIndex = index == 4 ? data.selectedIndex : index
  // data.showIndex = true
  window.scrollTo({
    left: 0,
    top: 0,
  })
  headerRef.value.setSelectedIndex(index)
  if (index == 0 && !data.hasInit) {
    initData()
  }
}
</script>

<style>
body::-webkit-scrollbar {
  display: none;
}
.course-type-container::-webkit-scrollbar {
  display: none;
}
</style>
